<template>
  <div class="todo-header">
    <input
      type="text"
      placeholder="请输入你的任务名称，按回车键确认"
      @keyup.enter="enterHandler"
    />
  </div>
</template>

<script>
export default {
  // props: ["addTodo"],
  methods:{
    //  键盘事件的回调
    enterHandler(e){
    //   按下回车时，需要调用父组件的方法 向父组件数组中添加一个方法

       //用户输入的内容为空的不在执行后面的语句
       if(e.target.value.trim()===""){
           alert("文本内容不能为空哦");
           return;
       }

    let newTodo = {id:Date.now(),title:e.target.value,done:false};





    //  //事件源内容触发自定义事件,实现子组件给父组件传递数据
    this.$emit('addTodo',newTodo)




    // this.addTodo(newTodo);

    // 清空文本框
    e.target.value =" "
    }
  }
};
</script>

<style>
</style>